.navbar {

  &.horizontal-menu {
    position: relative;
    height: @horizontal-menu-height;
    background: @horizontal-menu-bg;
    margin: 0;
    padding: 0;
    z-index: 100 + 1;
    min-height: 0px;
    .box-shadow(0 0px 1px fade(#000, 15%));

    &.navbar-fixed-top {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;

      + .page-container {
        margin-top: @horizontal-menu-height;

        > .sidebar-menu.fixed .sidebar-menu-inner {
          top: @horizontal-menu-height;
        }

        > .main-content {
        }
      }

      .settings-pane-open & {
        position: relative;

        + .page-container {
          margin-top: 0;

          > .sidebar-menu.fixed .sidebar-menu-inner {
            top: 0;
          }
        }
      }
    }

    + .page-container {
      //margin-top: @horizontal-menu-height;

      > .sidebar-menu.fixed .sidebar-menu-inner {
        top: @horizontal-menu-height;
      }
    }

    .navbar-inner {
      &:extend(.clearfix all);

      .navbar-brand {
        padding: 0 @default-padding;
        margin: 0;
        float: left;
        height: @horizontal-menu-height;
        display: table;

        &:hover a[data-toggle="settings-pane"] {
          .opacity(1);
        }

        .settings-pane-open & a[data-toggle="settings-pane"] {
          .opacity(1);

          i {
            color: @text-color;
          }
        }

        a {
          display: table-cell;
          vertical-align: middle;

          &.logo {
            //display: block;

            img {
              margin: 0;
            }
          }

          &[data-toggle="settings-pane"] {
            padding-left: @base-padding;
            .opacity(0);
            &:extend(.transall);

            i {
              display: block;
              line-height: 1;
              font-size: @font-size-small;
              color: @main-text-color;
              margin-top: 1px;
              &:extend(.transall);
            }

            &:hover {

              i {
                color: @text-color;
              }
            }
          }
        }
      }

      @media screen and (min-width: @screen-sm) {

        .navbar-nav {
          list-style: none;
          padding: 0;
          margin: 0;

          &.click-to-expand {

            .has-sub {

              &:hover > a:before {
                .rotate(0deg);
              }

              &.expanded > a:before {
                .rotate(90deg);
              }
            }
          }

          a {
            position: relative;
            display: inline-block;
            line-height: 1;
            color: @horizontal-menu-link-color;
            z-index: 1;
            &:extend(.transall);

            > i {
              display: inline-block;
              margin-right: @base-padding/2;
            }

            > .label.pull-right {
              margin-top: 0;
            }

            > .title {
              display: inline-block;

              + .badge {
                margin-left: @base-padding - 3;
              }
            }

            > .badge {

            }
          }

          li:hover > a,
          li.active > a {
            color: @horizontal-menu-link-active-color;
          }

          > li {
            position: relative;
            z-index: 1;
            line-height: @horizontal-menu-height;
            border: 1px solid transparent;
            border-top: 0;
            border-bottom: 0;

            &:hover {
              z-index: 2;
            }

            &.active,
            &:hover {
              border-color: @horizontal-menu-link-active-border-color;
              background-color: @horizontal-menu-link-active-bg-color;
            }

            &.active {
              margin-left: -1px;

              + li:hover {
                border-left-color: transparent;
              }
            }

            > a {
              padding: 0 @default-padding/2;
              line-height: @horizontal-menu-height;
            }

            > ul {
              position: absolute;
              min-width: @horizontal-menu-submenu-width;
              border: 1px solid #eee;
              visibility: hidden;
              display: block;
              left: -1px;
              .border-radius(0 0 @border-radius-base @border-radius-base);
              .box-shadow(~"0 2px 8px rgba(0,1,1,.05)");
              .transition(~"opacity 180ms linear, visibility 180ms linear");
              .opacity(0);
            }

            &.hover {

              > ul {
                visibility: visible;
                .opacity(1);
              }
            }
          }


          // First Level
          ul {
            position: relative;
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
            top: 100%;
            min-width: 100%;
            background: @horizontal-menu-submenu-bg;
            z-index: 2;

            // Second Level
            ul {
              display: block;
              height: 0px;
              overflow: hidden;
              visibility: hidden;
              .opacity(0);
              .transition(~"opacity 350ms linear");

              &.is-visible {
                height: auto;
                visibility: visible;
                .opacity(1);
              }
            }

            > li:last-child > a:after {
              display: none;
            }

            > li {
              @h-padd: @default-padding - 5;

              line-height: 1;
              margin: 0;

              > a {
                position: relative;
                display: block;
                white-space: nowrap;
                padding: @default-padding/2 @h-padd;
                color: @main-text-color;

                &:after {
                  content: '';
                  position: absolute;
                  left: @h-padd;
                  right: @h-padd;
                  bottom: 0;
                  background: #eee;
                  height: 1px;
                }
              }

              &.active > a {
                color: @horizontal-menu-link-active-color;
                background: #fafafa;
                border-top: 1px solid #eee;
                margin-top: -2px;

                &:after {
                  left: 0;
                  right: 0;
                }
              }

              &.has-sub {

                > a {

                  &:before {
                    content: '\f105';
                    font-family: 'FontAwesome';
                    display: block;
                    float: right;
                    color: @main-text-color;
                    position: relative;
                    margin-left: @base-padding;
                    line-height: 1.3;
                    &:extend(.transall);
                    .transform-origin(center center);
                  }
                }

                &:hover > a:before,
                &.expanded > a:before {
                  .rotate(90deg);
                }
              }

              &.hover {
              }

              ul {
                background: @horizontal-menu-submenu-sub-bg;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                margin-top: -1px;

                ul {
                  @bg: darken(@horizontal-menu-submenu-sub-bg, 2%);
                  @border: darken(@bg, 4%);

                  background: @bg;
                  border-top-color: @border;
                  border-bottom-color: @border;

                  a:after {
                    background-color: @border;
                  }

                  ul {
                    @bg: darken(@horizontal-menu-submenu-sub-bg, 4%);
                    @border: darken(@bg, 4%);

                    background: @bg;
                    border-top-color: @border;
                    border-bottom-color: @border;

                    a:after {
                      background-color: @border;
                    }

                  }
                }
              }

            }
          }
        }

      }

      .navbar-mobile-clear {
        display: block;
      }

      > .nav {
        list-style: none;
        margin: 0;
        padding: 0;

        &.navbar-right {
          //padding-right: @default-padding/2;
        }

        &.navbar-mobile {
          display: none;
        }

        > li {
          line-height: @horizontal-menu-height;
          display: inline-block;
          @link-active-color: darken(@userinfo-link-color, 15%);

          i {
            font-size: @font-size-base + 2;
            color: @userinfo-link-color;
            line-height: 1;
          }

          > a {
            position: relative;
            padding: 0 @default-padding/2;
            margin: 0;
            border: 1px solid transparent;
            border-top: 0;
            border-bottom: 0;
            z-index: 2;

            &:hover {
              background: @horizontal-menu-link-active-bg-color;
              //border-color: @horizontal-menu-link-active-border-color;

              i {
                color: @link-active-color;
              }
            }

            &.notification-icon {
              padding: 0 @base-margin;

              &:before {
                content: '';
                position: absolute;
                //display: block;
                height: 2px;
                top: 0px;
                left: 0;
                right: 0;
                background: @secondary-color;
                display: none;
              }

              &:hover:before {
                display: block;
              }

              i {
                margin-right: 2px;
              }

              .badge {
                font-size: 9px;
                position: absolute;
                top: 50%;
                right: 10px;
                padding: 4px;
                min-width: 18px;
                font-size: 400;
                line-height: 1;
                margin-top: -20px;
              }

              &.notification-icon-messages {

                &:before {
                  background-color: @xe-purple;
                }
              }
            }

            &[data-toggle="chat"] {
              padding: 0 @base-margin;

              i {

                .chat-open & {
                  color: @link-active-color;
                }
              }
            }
          }

          &.open > a.notification-icon {
            //background: @horizontal-menu-link-active-bg-color;
            background-color: #fff;
            border-color: @horizontal-menu-link-active-border-color;
            color: darken(@userinfo-link-color, 15%);

            i {
              color: @link-active-color;
            }

            &:before {
              display: block;
            }
          }

          > ul {
            z-index: 1;
            border-color: @horizontal-menu-link-active-border-color;
          }

          // Search field
          &.search-form {
            &:extend(.user-info-navbar .user-info-menu > li.search-form all);
            padding: 0 @base-margin;
          }

          // User Profile
          &.user-profile {
            &:extend(.user-info-navbar .user-info-menu > li.user-profile all);

            > a {
              border: 1px solid transparent;
              border-top: 0;
              border-bottom: 0;

              &:focus {
                background-color: #fff;
              }
            }

            &.open > a {
              background-color: #fff;
              border-color: @horizontal-menu-link-active-border-color;
            }

            &.open {

              > .dropdown-menu {
                margin-left: -1px;
              }
            }
          }

          // Dropdown Menus
          .dropdown-menu {
            &:extend(.user-info-navbar .user-info-menu > li .dropdown-menu all);
            line-height: @line-height-base;

            &.messages,
            &.notifications,
            &.user-profile-menu {
              z-index: 1;
              margin-top: -1px;
              //&:extend(.user-info-navbar .user-info-menu > li .dropdown-menu.messages all);
            }

            &.user-profile-menu {
              right: 0 !important;
            }

            &.notifications {
              //&:extend(.user-info-navbar .user-info-menu > li .dropdown-menu.notifications all);
            }
          }
        }
      }


      @media screen and (min-width: @screen-xs-max) and (max-width: @screen-md-min) {

        .navbar-brand {
          padding: 0 @default-padding/2;
        }

        .navbar-nav {

          > li {
            line-height: @horizontal-menu-height - 1;

            > a {
              padding: 0 @base-padding;
              font-size: @font-size-base - 1;

              > .badge {
                display: none;
              }
            }
          }
        }

        > .nav {

          > li {

            i {
              font-size: @font-size-base;
            }

            > a {

              &.notification-icon {
                padding-left: @default-padding/2;
                padding-right: @default-padding/2;
              }
            }

            &.user-profile {

              > a {

                > span {
                  display: none !important;
                }
              }
            }
          }
        }
      }
    }

    // Minimal
    &.navbar-minimal {
      height: @horizontal-menu-height-minimal;

      &.navbar-fixed-top {

        + .page-container {
          margin-top: @horizontal-menu-height-minimal;

          > .sidebar-menu.fixed .sidebar-menu-inner {
            top: @horizontal-menu-height-minimal;
          }
        }
      }

      + .page-container {

        > .sidebar-menu.fixed .sidebar-menu-inner {
          top: @horizontal-menu-height-minimal;
        }
      }

      .navbar-inner {

        .navbar-brand {
          height: @horizontal-menu-height-minimal;
        }

        @media screen and (min-width: @screen-sm) {

          .navbar-nav {

            > li {
              line-height: @horizontal-menu-height-minimal;

              > a {
                line-height: @horizontal-menu-height-minimal;
              }
            }
          }

        }


        > .nav {


          > li {
            line-height: @horizontal-menu-height-minimal;
          }
        }

        @media screen and (min-width: @screen-xs-max) and (max-width: @screen-md-min) {

          .navbar-nav {

            > li {
              line-height: @horizontal-menu-height-minimal - 1;
            }
          }
        }
      }
    }
  }
}


// Mobile
@media screen and (max-width: @screen-sm) {

  .navbar {

    &.horizontal-menu {
      background: @brand-primary;
      color: #fff;
      height: auto;

      .chat-open & {
        left: -@sidebar-width;
      }

      &.navbar-fixed-top {
        position: relative;

        + .page-container {
          margin-top: 0;

          > .sidebar-menu.fixed .sidebar-menu-inner {
            top: 0;
          }
        }

        .settings-pane-open & {
          position: relative;

          + .page-container {
            margin-top: 0;

            > .sidebar-menu.fixed .sidebar-menu-inner {
              top: 0;
            }
          }
        }
      }

      + .page-container {

        > .sidebar-menu.fixed .sidebar-menu-inner {
          top: @horizontal-menu-height;
        }
      }

      .navbar-inner {
        padding: @base-margin 0;

        .navbar-brand {
          height: auto;
          padding-left: @base-margin;

          a[data-toggle="settings-pane"] {

            display: none;
          }
        }

        .navbar-mobile-clear {
          display: block;
          clear: both;
        }

        .navbar-nav {
          display: none;
          .sidebar-menu > .main-menu;
          margin-bottom: 0;

          &.mobile-is-visible {
            display: block;
          }
        }

        > .nav {
          display: none;

          > li {
            line-height: 65px;
          }
        }

        // Mobile Toggles
        > .nav {

          &.nav-userinfo {
            float: none;
            width: 100%;
            display: none;
            background: #fff;
            position: relative;
            top: @base-margin;
            text-align: right;

            &.mobile-is-visible {
              display: block;
            }

            > .xs-left {
              float: left;

              &.open > .dropdown-menu {
                left: 1px;
              }
            }

            .notification-icon {

              .badge {
                top: 50%;
              }
            }

            .user-profile {

              > a {

                span {
                  display: none;
                }
              }

              &.open > a {
                background-color: @horizontal-menu-link-active-bg-color;
              }
            }
          }

          &.navbar-mobile {
            display: block;
            float: right;
            padding-right: @base-margin;

            a {
              @s: 18px;

              position: relative;
              display: inline-block;
              color: @main-text-color;
              line-height: 1;
              margin-left: @default-padding/2;

              i {
                line-height: 1;
                font-size: @s;
                position: relative;
                top: 1px;
              }

              &:hover,
              &:active,
              &:focus {
                color: @main-text-active-color;
              }

              .badge {
                position: absolute;
                right: -3px;
                top: -8px;
                font-size: 8px;
                padding: 1px 2px;
                min-width: 14px;
              }
            }
          }
        }
      }
    }
  }
}